<template>
  <div class="questions-answers-container">
    <div class="preset-key-words">
      <div
        class="preset-key-words-item"
        v-for="pkw in presetKeyWordsData"
        :key="pkw.id"
      >
        <h3 class="preset-key-words-item-title">
          <img :src="pkw.imgName" alt="" />
          {{ pkw.name }}
        </h3>
        <ul class="preset-key-words-item-list">
          <li
            v-for="pkwChilrend in pkw.presetKeywords"
            :key="pkwChilrend.id"
            @click="
              handleListQuery({
                queName: pkwChilrend.question,
                level: pkwChilrend.queLevel,
                areas: pkwChilrend.areas,
                bankNo: pkwChilrend.bankNo,
                qaBankType: qaBankTypes[pkwChilrend.qaBankType],
              })
            "
          >
            {{ pkwChilrend.showName }}
          </li>
        </ul>
      </div>
    </div>
    <div class="questions-answers-list">
      <div
        class="questions-answers-list-item"
        v-for="(record, index) in chatRecord"
        :key="index"
      >
        <div class="answers" v-if="record.type == 'receive'">
          <div class="questions-answers-time">{{ record.time }}</div>
          <div class="robot">
            <div class="robot-logo">
              <img src="../../assets/images/robotManbig.png" alt="" />
            </div>
            <div class="robot-name">{{ robotInfo.robotName }}</div>
          </div>
          <div class="robot-text">{{ record.data }}</div>
        </div>
        <div class="answers receive" v-if="record.type == 'receive_0'">
          <div class="questions-answers-time">{{ record.time }}</div>
          <div class="robot">
            <div class="robot-logo">
              <img src="../../assets/images/robotManbig.png" alt="" />
            </div>
            <div class="robot-name">{{ robotInfo.robotName }}</div>
          </div>
          <div class="robot-text">
            HI，您好，我是{{
              robotInfo.robotName
            }}，可为您提供法律咨询服务，你可以对我说<span
              class="robot-active"
              @click="handleQaBankType(qaBankTypes.complianceAdvice)"
              >{{ qaBankTypes.complianceAdvice.name }}</span
            >或者<span
              class="robot-active"
              @click="handleQaBankType(qaBankTypes.riskAtlas)"
              >{{ qaBankTypes.riskAtlas.name }}</span
            >，也可以点击上面导航栏了解相关知识。
          </div>
        </div>
        <div class="answers" v-if="record.type == 'receive_1'">
          <div class="robot">
            <div class="robot-logo">
              <img src="../../assets/images/robotManbig.png" alt="" />
            </div>
            <div class="robot-name">{{ robotInfo.robotName }}</div>
          </div>
          <div class="robot-text">
            <div
              class="robot-text-title"
              v-if="record.queName && record.level !== 0 && record.data?.length"
            >
              {{ record.queName }}
            </div>
            <template v-if="!record.data?.length">
              <div class="empty-data">
                对不起，{{ robotInfo.robotName }}还没学会，请点击<span
                  class="robot-active"
                  @click="handleSkipUrl()"
                  >人工咨询</span
                >
              </div>
            </template>
            <template v-else-if="record.level === 0">
              <div v-if="record.data[0].answerType === '3'">
                {{ record.data[0].content }}请点击<span
                  class="robot-active"
                  @click="handleSkipUrl()"
                  >人工咨询</span
                >
              </div>
            </template>
            <template v-else-if="record.level === 2">
              <!--我们合规领域主要有公司治理、反垄断、反不正当竞争、商业贿赂、商业秘密、信息安全、合作伙伴、知识产权、【二级目录中的合规领域】，请点击您感兴趣的领域-->
              <div
                class="compliance-areas"
                v-if="record.queName === '合规领域'"
              >
                我们合规领域主要有
                <span v-for="(answer, index) in record.data" :key="index">
                  <span
                    class="robot-active"
                    @click="
                      handleListQuery({
                        queName: answer.content,
                        level: record.level,
                        areas: answer.content,
                      })
                    "
                    >{{ answer.content }}</span
                  >
                  <span v-if="index + 1 < record.data.length">、</span>
                </span>
                ，请点击您感兴趣的合规领域
              </div>
              <!--我们根据公司业务划分了九个业务领域，分别是【二级目录中的领域分类】、【二级目录中的领域分类】……..请点击您感兴趣的业务领域-->
              <div
                class="business-area"
                v-else-if="record.queName === '业务领域'"
              >
                我们根据公司业务划分了九个业务领域，分别是
                <span v-for="(answer, index) in record.data" :key="index">
                  <span
                    class="robot-active"
                    @click="
                      handleListQuery({
                        queName: answer.content,
                        level: record.level,
                        areas: answer.content,
                      })
                    "
                    >{{ answer.content }}</span
                  >
                  <span v-if="index + 1 < record.data.length">、</span>
                </span>
                ，请点击您感兴趣的业务领域
              </div>
            </template>
            <template v-else-if="record.level === 3">
              <div class="understanding-content">
                <p>您好，请问您是不是想要了解以下内容？</p>
                <ul>
                  <li v-for="(answer, index) in record.data" :key="index">
                    <span class="queModuleTitle">【{{ answer.areas }}】</span>
                    <ul>
                      <li
                        v-for="(content, i) in answer?.showContents"
                        :key="i"
                        class="robot-active"
                        @click="
                          handleListQuery({
                            queName: content,
                            level: record.level,
                            areas: answer.areas,
                            qaBankType: record.qaBankType,
                          })
                        "
                        v-html="`${i + 1}. ${content}`"
                      ></li>
                    </ul>
                  </li>
                </ul>
                <p class="mr-top">
                  如以上都不是请点击<span
                    class="robot-active"
                    @click="handleMoreQueName($event, record)"
                    >更多</span
                  >或<span class="robot-active" @click="handleSkipUrl()"
                    >人工咨询</span
                  >
                </p>
              </div>
            </template>
            <template v-else-if="record.level === 4">
              <div class="recommend-content">
                <p>
                  您好，关于{{ record.queName
                  }}{{
                    robotInfo.robotName
                  }}为您推荐了以下内容，请选择您感兴趣的内容点击查看。
                </p>
                <ul>
                  <li
                    v-for="(answer, index) in record.data"
                    :key="index"
                    class="robot-active"
                    @click="
                      handleListQuery({
                        queName: answer.content,
                        level: record.level,
                        qaBankType: record.qaBankType,
                      })
                    "
                    v-html="`${index + 1}. ${answer.content}`"
                  ></li>
                </ul>
                <p class="mr-top">
                  如以上都不是请点击<span
                    class="robot-active"
                    @click="handleMoreQueName($event, record)"
                    >更多</span
                  >或<span class="robot-active" @click="handleSkipUrl()"
                    >人工咨询</span
                  >
                </p>
              </div>
            </template>
            <template v-else-if="record.level === 5">
              <div class="risk-present">
                <p>以下行为会被认为存在风险：</p>
                <ul>
                  <li
                    v-for="(answer, index) in record.data"
                    :key="index"
                    class="robot-active"
                    @click="
                      handleListQuery({
                        queName: answer.content,
                        level: record.level,
                        qaBankType: record.qaBankType,
                      })
                    "
                    v-html="`${index + 1}. ${answer.content}`"
                  ></li>
                </ul>
                <p>
                  请问您需要进一步了解相关案例、责任后果、责任类型、责任主体、法律依据、合规建议么？如需要请点击具体行为。
                </p>
              </div>
            </template>
            <template
              v-else-if="record.level === 6 && record.data.length === 1"
            >
              <template v-for="(answer, index) in record.data">
                <ul class="ans-content" :key="index">
                  <li v-if="answer.riskWarning">
                    <div><label>合规义务</label></div>
                    <div
                      v-html="answer.riskWarning"
                      :class="{
                        riskAtlasOverflow: answer.hiddenOverRiskWarning,
                      }"
                    ></div>
                    <div
                      v-show="answer.hiddenOverRiskWarning"
                      class="clickMore"
                    >
                      <span
                        class="robot-active"
                        @click="
                          answer.hiddenOverRiskWarning =
                            !answer.hiddenOverRiskWarning
                        "
                        >点击展开更多</span
                      >
                    </div>
                  </li>
                  <li v-if="answer.respContent">
                    <div><label>违规责任</label></div>
                    <div
                      v-html="answer.respContent"
                      :class="{
                        riskAtlasOverflow: answer.hiddenOverRespContent,
                      }"
                    ></div>
                    <div
                      v-show="answer.hiddenOverRespContent"
                      class="clickMore"
                    >
                      <span
                        class="robot-active"
                        @click="
                          answer.hiddenOverRespContent =
                            !answer.hiddenOverRespContent
                        "
                        >点击展开更多</span
                      >
                    </div>
                  </li>
                  <li v-if="answer.respPost">
                    <div><label>合规责任岗位</label></div>
                    <div v-html="answer.respPost"></div>
                  </li>
                  <li v-if="answer.supervisePost">
                    <div><label>合规监督岗位</label></div>
                    <div v-html="answer.supervisePost"></div>
                  </li>
                  <li v-if="answer.qaLawRegulationsList?.length">
                    <div><label>法律法规</label></div>
                    <div
                      v-for="(qa, qaIndex) in answer.qaLawRegulationsList"
                      :key="qaIndex"
                    >
                      <span
                        class="robot-active"
                        @click="handleSkipUrl(false, qa.url)"
                        >{{ qa.name }}</span
                      >
                    </div>
                  </li>
                  <li v-if="answer.managementSystem">
                    <div><label>管理制度</label></div>
                    <div v-html="answer.managementSystem"></div>
                  </li>
                  <li v-if="answer.qaComplianceAdviceList?.length">
                    <div><label>合规指引</label></div>
                    <div
                      v-for="(qa, qaIndex) in answer.qaComplianceAdviceList"
                      :key="qaIndex"
                    >
                      <span
                        class="robot-active"
                        @click="handleSkipUrl(false, qa.url)"
                        >{{ qa.name }}</span
                      >
                    </div>
                  </li>
                  <li v-if="answer.qaTypicalCaseList?.length">
                    <div><label>典型案例</label></div>
                    <div
                      v-for="(qa, qaIndex) in answer.qaTypicalCaseList"
                      :key="qaIndex"
                    >
                      <span
                        class="robot-active"
                        @click="handleSkipUrl(false, qa.url)"
                        >{{ qa.name }}</span
                      >
                    </div>
                  </li>
                  <li v-if="answer.associationNumber">
                    <div><label>风险全景图关联编号</label></div>
                    <div>{{ answer.associationNumber }}</div>
                  </li>
                  <li v-if="answer.questionAnswer">
                    <div
                      v-html="answer.questionAnswer"
                      :class="{
                        complianceAdviceOverflow:
                          answer.hiddenOverQuestionAnswer,
                      }"
                    ></div>
                    <div
                      v-show="answer.hiddenOverQuestionAnswer"
                      class="clickMore"
                    >
                      <span
                        class="robot-active"
                        @click="
                          answer.hiddenOverQuestionAnswer =
                            !answer.hiddenOverQuestionAnswer
                        "
                        >点击展开更多</span
                      >
                    </div>
                  </li>
                </ul>
              </template>
            </template>
            <template v-else>
              <!--专业问题的多答案增加猜想提示-->
              <div class="guess-hint">
                <p>
                  <span>{{ robotInfo.robotName }}</span
                  >猜您想要咨询的问题是：
                </p>
                <ul>
                  <template v-for="(answer, index) in record.data">
                    <li
                      :key="index"
                      class="robot-active"
                      v-if="
                        answer.answerType === '1' &&
                        answer.content &&
                        answer.twoLevel
                      "
                      @click="
                        handleListQuery({
                          queName: answer.content,
                          level: record.level,
                          areas: answer.areas,
                          bankNo: answer.bankNo,
                          qaBankType: record.qaBankType,
                        })
                      "
                      v-html="`${index + 1}、 ${answer.content}`"
                    ></li>
                  </template>
                </ul>
              </div>
            </template>
          </div>
        </div>
        <!-- 切换为“合规职责”后说的第一个气泡 -->
        <div class="answers" v-if="record.type == 'receive_2'">
          <div class="robot">
            <div class="robot-logo">
              <img src="../../assets/images/robotManbig.png" alt="" />
            </div>
            <div class="robot-name">{{ robotInfo.robotName }}</div>
          </div>
          <div class="robot-text">
            <div class="robot-text-title" v-if="record.queName">
              {{ record.queName }}
            </div>
            <div class="compliance-responsibilities">
              <p>
                您好，{{
                  robotInfo.robotName
                }}根据您的岗位情况为您匹配了以下合规职责
              </p>
              <ul>
                <li
                  v-for="(answer, index) in record.data"
                  :key="index"
                  class="robot-active"
                  @click="
                    handleListQuery({
                      queName: answer.queName,
                      level: 4,
                      bankNo: answer.bankNo,
                      qaBankType: qaBankTypes.riskAtlas,
                    })
                  "
                >
                  {{ index + 1 }}、{{ answer.queName }}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 切换为“合规职责”后说的第二个气泡 -->
        <div class="answers" v-if="record.type == 'receive_3'">
          <div class="robot">
            <div class="robot-logo">
              <img src="../../assets/images/robotManbig.png" alt="" />
            </div>
            <div class="robot-name">{{ robotInfo.robotName }}</div>
          </div>
          <div class="robot-text">
            <div class="compliance-responsibilities-two">
              您还可以点击<span
                class="robot-active"
                @click="handleComplianceChecklist('查看我的所有合规职责清单')"
                >查看我的所有合规职责清单</span
              >或者<span
                class="robot-active"
                @click="handleComplianceChecklist('查看所有岗位的合规职责清单')"
                >查看所有岗位的合规职责清单</span
              >
            </div>
          </div>
        </div>
        <!-- 切换为“我要咨询”后说的气泡 -->
        <div class="answers" v-if="record.type == 'receive_4'">
          <div class="robot">
            <div class="robot-logo">
              <img src="../../assets/images/robotManbig.png" alt="" />
            </div>
            <div class="robot-name">{{ robotInfo.robotName }}</div>
          </div>
          <div class="robot-text">
            您好，请问您要咨询什么问题，可以直接在对话框输入您想要问的问题。
          </div>
        </div>
        <div class="questions" v-if="record.type == 'send'">
          <div class="questions-answers-time">{{ record.time }}</div>
          <div class="user-text">{{ record.data }}</div>
          <div class="user">
            <div class="user-logo">
              <img :src="userPhoneUrl" @error="handleError" alt="" />
            </div>
            <div class="user-name">{{ userName }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import userErrorImg from "@/assets/images/customer_se.png";
import { getUserInfo, } from "@/api";
import { preventDrag, manualConsultationUrl, Toast } from "@/utils";
export default {
  name: "QuestionsAnswers",
  props: {
    robotInfo: Object,
    qaBankTypes: Object,
    randomNum: Number,
    presetKeyWordsData: Array,
    chatRecord: Array,
  },
  data() {
    return {
      userPhoneUrl: "", //用户相片地址
      userName: "", //用户信息
    };
  },

  async mounted() {
    //禁止问答区域上下滑动时带动顶部和底部一起滑动
    preventDrag(".questions-answers-container");
    //获取用户信息
    try {
      const { userName } = await getUserInfo()
      this.userName = userName
    } catch (error){
      Toast.fail(`获取用户信息失败:${error}`)
    }
  },

  methods: {
    /**
     * 点击题库类型 触发事件，传递给父组件
     */
    handleQaBankType(qaBankType) {
      this.$emit("handleQaBankType", qaBankType);
    },

    /**
     * 点列表数据查询 触发事件，传递给父组件
     */
    handleListQuery(obj) {
      this.$emit("handleListQuery", obj);
    },

    /**
     * 点击更多问题题干 触发事件，传递给父组件
     */
    handleMoreQueName($event, record) {
      this.$emit("handleMoreQueName", { $event, record });
    },

    /**
     * 跳转地址
     * @param {*} isArtificialUrl 是否是人工客服地址
     */
    handleSkipUrl(isArtificialUrl = true, url) {
      const newUrl = isArtificialUrl ? manualConsultationUrl() : url;
      MXCommon.openUrlPage(newUrl);
    },

    /**
     * 点击合规职责清单 触发事件，传递给父组件
     * @param {*} name 名称
     */
    handleComplianceChecklist(name) {
      this.$emit("handleComplianceChecklist", name);
    },

    /**
     * 数据加载期间发生错误时触发
     */
    handleError(event) {
      event.target.src = userErrorImg;
    },
  },
};
</script>

<style lang="less">
@import url("~@/assets/styles/publicStyle.less");
.answers {
  .robot-text {
    .ans-content {
      li {
        img {
          width: 100% !important;
        }
      }
    }

    table {
      border-collapse: collapse;
      td {
        padding: 10px;
        border: 2px solid @AssistLightGrey;
      }
    }
  }
}
</style>
<style lang="less" scoped>
@import url("~@/assets/styles/legalAdvice/questionsAnswers.less");
</style>